<template>
  <div class="w-container">
    <div class="container" :class="{ 'hidden-overflow': !clickInput }" >
      <header :class="{ 'show-bottom': showHidden && isDown }" class="header">
        <div class="nav">
          <div class="nav-left">
            <div class="nav-title">
              <router-link :to="{ name: 'main' }">
                <h1 class="title">易动</h1>
              </router-link>
            </div>
            <div class="menu">
              <Menu mode="horizontal" active-name="1">
                <MenuItem class="menu-item" name="1"> 首页 </MenuItem>
                <MenuItem class="menu-item" name="2"> 发现 </MenuItem>
                <MenuItem class="menu-item" name="3" @click.native="goWaiting"> 等你来答 </MenuItem>
              </Menu>
            </div>
            <search-box class="show-search"></search-box>
          </div>
          <div class="nav-right">
            <Badge :count="count">
              <Icon class="r-ico ico" type="ios-notifications" />
            </Badge>
            <Badge :count="msgCount">
              <Icon class="r-msg ico" type="ios-chatbubbles" />
            </Badge>
            <div class="avatar">
              <img
                ref="img"
                @click="handleShowInfo"
                src="../../assets/images/avatar.jpg"
                alt=""
              />
            </div>
          </div>
        </div>

        <div class="hidden-header" v-if="!clickInput">
          <slot name="hidden"> </slot>
        </div>
      </header>
    </div>
    <ul class="user-bar" :class="{ showInfo }" ref="info">
      <li class="bar-item">
        <router-link :to="{ name: 'personal' }">
          <Icon type="ios-contact" />
          <span> 我的主页 </span>
        </router-link>
      </li>
      <li class="bar-item">
        <router-link to="">
          <Icon type="ios-cog" />

          <span>设置</span>
        </router-link>
      </li>
      <li class="bar-item" @click="logOut">
        <router-link to="">
          <Icon type="md-power" />
          <span>退出</span>
        </router-link>
      </li>
    </ul>
    <AskQuestion v-if="this.$store.state.writeQuestion"/>
  </div>
</template>

<script>

import SearchBox from "@/components/header/SearchBox";
import AskQuestion from '@/components/AskQuestion'

import { getScrollTop,delCookie} from "@/common/utils";

export default {
  name: "Header",
  components: {
    SearchBox,
    AskQuestion
  },
  props: {
    scrollDistance: {
      type: Number,
      default: 450
    }
  },
  data() {
    return {
      count: 2,
      msgCount: 2,
      showHidden: false,
      scrollTop: 0,
      isDown: true,
      showInfo: true,
      clickInput: false,
    };
  },
  methods: {
    
    // 点击头像
    handleShowInfo() {
      this.computedBoundingClientRect();
      this.showInfo = !this.showInfo;
    },
    // 退出登录
    logOut() {
      console.log('退出登录');
      // 将localStore的记录清空
      localStorage.removeItem("Authorization");
      localStorage.removeItem("userId")
      sessionStorage.removeItem('toPath')
      
      // 将isLogin置为false
      this.$store.state.isLogin = false;
      // 跳转路由
      this.$router.push({ name: "login" });
    },
    //滚动事件
    handleScroll() {
      let isDown = true; //判断滑动方向
      let scrollTop = getScrollTop();
      scrollTop - this.scrollTop > 0
        ? (this.isDown = true)
        : (this.isDown = false);
      this.scrollTop = scrollTop;
      const isPersonPage = this.$store.state.isPersonPage;
      if (this.isDown === true && this.scrollTop >= (isPersonPage ? 450 : this.scrollDistance)) {
        this.showHidden = true;
      } else this.showHidden = false;
  
    },
    // 计算img元素的left和top
    computedBoundingClientRect() {
      const { img, info } = this.$refs;
      if (img) {
        let { left, top } = img.getBoundingClientRect();
        info.style.left = left - 45 + "px";
        info.style.top = top + 54 + "px";
      }
    },
    //点击搜索框
    inputClick(e) {
      //只有当点击的是非隐藏的搜索框才触发搜索框点击事件
      if (e.target.classList.contains("ivu-input")&&e.path.includes(document.getElementsByClassName('show-search')[0])) {
        if (!this.clickInput) {
          //用户点击输入框
          //隐藏hiddencontainer,修改overflow
          this.clickInput = true;
          //取消滚动事件
          window.removeEventListener("scroll", this.handleScroll);
        } else {
          this.clickInput = false;
          window.addEventListener("scroll", this.handleScroll);
        }
      } else {
        this.clickInput = false;
        window.addEventListener("scroll", this.handleScroll);
      }
    },
    //跳转到等你来答页面
    goWaiting() {
      this.$router.push({
        name: 'waiting'
      })
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize", () => {
      this.computedBoundingClientRect();
    });
    window.addEventListener("click", (e) => {
       this.inputClick(e);
      // console.log(e.target.classList.contains("user-bar"));
      if (
        e.target.tagName !== "IMG" &&
        !e.target.classList.contains("user-bar")
      ) {
        this.showInfo = true;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.showInfo {
  display: none;
}
.w-container {
  min-width: 100rem;
  position: relative;
  height: 6rem;
  width: 100%;
  z-index: 999;
  .container {
    box-shadow: 0 .1rem .3rem rgba(18,18,18,.1);
    position: fixed;
    width: 100%;
    height: 6rem;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    .header {
      display: flex;
      flex-direction: column;
      width: 100rem;
      height: 6rem;
      margin: 0 auto;
      transition: transform 0.25s linear;
      .nav {
        display: flex;
        justify-content: space-between;
        height: 6rem;
        width: 100rem;
        .nav-left {
          display: flex;
          width: 71rem;
          .nav-title {
            height: 100%;
            .title {
              height: 100%;
              width: 6rem;
              font-size: 3rem;
              line-height: 6rem;
              color: #2d8cf0;
              font-weight: bold;
            }
          }
          .menu {
            flex: 1;
            margin-left: 2rem;
            .menu-item {
              font-size: 1.5rem;
            }
          }
        }
        .nav-right {
          width: 20rem;
          justify-content: space-between;
          display: flex;
          align-items: center;
          .r-ico {
            font-size: 2.7rem;
          }
          .ico {
            color: #8590a6;
            cursor: pointer;
          }
          .avatar {
            display: flex;
            width: 6rem;
            height: 6rem;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;
            img {
              width: 3rem;
              height: 3rem;
            }
            // .down {
            //   position: fixed;
            //   right: 14%;
            //   background: #fff;
            // }
          }
          .r-msg {
            font-size: 2.7rem;
          }
        }
      }
      .hidden-header {
        height: 6rem;
        width: 100%;
        
   
      }
    }
    .show-top {
      transform: translateY(6rem);
    }
    .show-bottom {
      transform: translateY(-6rem);
    }
  }

  .hidden-overflow {
    overflow: hidden;
  }

  // .search-box {
  //   position: absolute;
  //   top: 0;
  //   left: 60rem;
  //   z-index: 99;
  // }

  .user-bar {
    position: fixed;
    top: 7rem;
    right: 21.5rem;
    width: 12rem;
    padding: 0.3rem;
    z-index: 3;
    background: #fff;
    .bar-item {
      display: flex;
      height: 3.6rem;
      padding: 0.3rem;
      padding-left: 1rem;
      text-align: center;
      line-height: 3.6rem;
      cursor: pointer;
      color: rgb(133, 144, 166);
      &:hover {
        background: #f6f6f6;
      }
    }
    &::after {
      content: "";
      position: absolute;
      top: -20px;
      left: 52px;
      width: 0rem;
      height: 0rem;
      border: 1rem solid transparent;
      border-bottom-color: #fff;
    }
  }
}
</style>